<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title th:text="${product.id == null ? '添加农产品' : '编辑农产品'} + ' - 暖心助农选品平台'">农产品表单</title>
</head>
<body>
    <div layout:fragment="content">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0" th:text="${product.id == null ? '添加农产品' : '编辑农产品'}">农产品表单</h4>
                    </div>
                    <div class="card-body">
                        <form th:action="@{${product.id == null ? '/farmer/products' : '/farmer/products/' + product.id}}"
                              method="post" enctype="multipart/form-data" th:object="${product}">
                            
                            <div class="mb-3">
                                <label for="name" class="form-label">产品名称</label>
                                <input type="text" class="form-control" id="name" th:field="*{name}" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="description" class="form-label">产品描述</label>
                                <textarea class="form-control" id="description" th:field="*{description}" rows="3" required></textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label for="category" class="form-label">类别</label>
                                <select class="form-select" id="category" th:field="*{category}" required>
                                    <option value="">请选择类别</option>
                                    <option value="vegetables">蔬菜</option>
                                    <option value="fruits">水果</option>
                                    <option value="grains">粮食</option>
                                    <option value="others">其他</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="price" class="form-label">价格</label>
                                <div class="input-group">
                                    <span class="input-group-text">￥</span>
                                    <input type="number" class="form-control" id="price" th:field="*{price}" 
                                           step="0.01" min="0" required>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="stock" class="form-label">库存数量</label>
                                <input type="number" class="form-control" id="stock" th:field="*{stock}" 
                                       min="0" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="imageFile" class="form-label">产品图片</label>
                                <input type="file" class="form-control" id="imageFile" name="imageFile" 
                                       accept="image/*" th:required="${product.id == null}">
                                <div class="form-text">支持 JPG、PNG 格式的图片，建议尺寸 800x600 像素。</div>
                                <div th:if="${product.image}" class="mt-2">
                                    <img th:src="@{${product.image}}" class="img-thumbnail" style="max-width: 200px;" alt="当前图片">
                                    <div class="form-text">如果不上传新图片，将保留当前图片。</div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-between">
                                <a th:href="@{/farmer/products}" class="btn btn-secondary">返回</a>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script th:inline="javascript">
            $(document).ready(function() {
                // 预览图片
                $('#imageFile').change(function() {
                    if (this.files && this.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            var preview = $('<img>').attr({
                                'src': e.target.result,
                                'class': 'img-thumbnail mt-2',
                                'style': 'max-width: 200px;'
                            });
                            $('.img-thumbnail').remove();
                            $('#imageFile').after(preview);
                        }
                        reader.readAsDataURL(this.files[0]);
                    }
                });
            });
        </script>
    </th:block>
</body>
</html> 